<template>
	<view class="container">
		<scroll-view class="scroll-content" scroll-y="true">
			
			<!--顶部轮播图 -->
			<view class="section">
				<text class="section-title">泉州风光</text>
				<swiper class="swiper" :autoplay="true" :interval="4000" :duration="500" indicator-dots="true">
					<swiper-item v-for="(item,index) in List" :key="index">
						<image class="swiper-image" :src="item.image" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			
			<!-- 城市介绍 -->
			<view class="section">
				<text class="section-title">泉州介绍</text>
				<rich-text class="rich-text" :nodes="cityIntroduction"></rich-text>
			</view>
			
			<!-- 探索进度 -->
			<view class="section">
				<text class="section-title">探索进度</text>
				<view class="progress-container">
					<text class="progress-text">当前进度:{{progress}}%</text>
					<progress class="progress-bar" :percent="progress" show-info border-radius="10"
					active-color="#007AFF" backgroundColor="#F0F0F0"></progress>
				</view>
			</view>
			
			<!-- 城市选择 -->
			<view class="section">
				<text class="section-title">城市选择</text>
				<view>当前选择:{{choose}}</view>
				<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
					<view>{{multiArray[0][multiIndex][0]}},{{multiArray[1][multiIndex][1]}},{{multiArray[2][multiIndex][2]}}</view>
				</picker>
			</view>
			
			<!-- 泉州宣传 -->
			<view class="section">
				<text class="section-title">泉州宣传</text>
				<view class="video-container">
					<view class="video-wrapper">
						<video
						id="myVideo" src="/static/city-video.mp4"></video>
					</view>   
				</view>
			</view>
			
			<!-- 泉州背景音乐 -->
			<view class="audio-wrapper">
				<text class="audio-subtitle">泉州背景音乐</text>
				<view class="audio-group">
					<button class="audio-btn" @click="toggleMusic">
						<text class="btn-text">{{ isPlaying ? '暂停' : '播放' }}</text>
				 		<view class="btn-icon">
							<view v-if="!isPlaying" class="play-icon"></view>
				 			<view v-else class="pause-icon">
								<view class="pause-line"></view>
				 				<view class="pause-line"></view>
				 			</view>
				 		</view>
				 	</button>
				 	<text class="audio-desc">泉州南音-泉州传统乐团演奏</text>
				 	<slider class="audio-slider" :value="progress" @change="adjustProgress" min="0" max="100"></slider>
				</view>
			</view>
			
			<!-- 偏好设置 -->
			<view class="section">
				<text class="section-title">偏好设置</text>
				<view class="label">出行方式：</view>
				<radio-group class="radio-group" @change="handleTravelModeChange">
					<label class="radio-item">
						<radio value="bus" :checked="travelMode === 'bus'" /> 公交
				    </label>
				    <label class="radio-item">
				        <radio value="drive" :checked="travelMode === 'drive'" /> 自驾
				    </label>
				    <label class="radio-item">
				        <radio value="walk" :checked="travelMode === 'walk'" /> 步行
				    </label>
				</radio-group>
			</view>
			
			<!-- 显示推荐景点 -->
			<view class="section">
				<text class="section-title">显示推荐景点</text>
				<switch :checked="showRecommend" @change="handleShowRecommendChange" />
			</view>
			
			<!-- 探索半径 -->
			<view class="section">
				<text class="section-title">探索半径：{{ exploreRadius }}km</text>
				<slider :min="1" :max="20" :value="exploreRadius" @change="handleExploreRadiusChange" />
			</view>
			
			
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				List: [
				        { image: '/static/city1.png' },
				        { image: '/static/city2.png' },
				        { image: '/static/city3.png' }
				      ],
				cityIntroduction:'<h3>海上丝绸之路起点-泉州</h3><br/><b>历史文化:</b>泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”。<br/><b>著名景点：</b>清源山，开元寺，泉州清净寺崇武古城等。<br/><b>特色文化：</b>拥有<span style="color: blue;">南音</span>，<span style="color: blue;">木偶戏</span>和<span style="color: blue;">闽南建筑</span>等丰富的非物质文化遗产。',
				progress:60,
				choose:'福建省-泉州市-丰泽区',
				travelMode: 'bus',
				showRecommend: true, 
				exploreRadius: 10 ,
				musicUrl:'/static/city-music.mp3'
			}
		},
		mounted() {
					this.audioCtx = uni.createInnerAudioContext();
					this.audioCtx.src = this.musicUrl;
		
					this.audioCtx.onPlay(() => {
						this.isPlaying = true;
					});
		
					this.audioCtx.onPause(() => {
						this.isPlaying = false;
					});
		
					this.audioCtx.onTimeUpdate(() => {
						if (this.audioCtx.duration > 0) {
							this.progress = (this.audioCtx.currentTime / this.audioCtx.duration) * 100;
						}
				});
		},
		methods: {
			    handleTravelModeChange(e) {
			      this.travelMode = e.detail.value;
			      console.log('出行方式选择为：', this.travelMode);
			    },
				handleShowRecommendChange(e) {
				      this.showRecommend = e.detail.value;
				      console.log('是否显示推荐景点：', this.showRecommend);
				},
				handleExploreRadiusChange(e) {
				      this.exploreRadius = e.detail.value;
				      console.log('探索半径设置为：', this.exploreRadius + 'km');
				},
				toggleMusic() {
					if (this.isPlaying) {
						this.audioCtx.pause();
					} else {
						this.audioCtx.play();
						}
				},
				adjustProgress(e) {
					const progress = e.detail.value;
						if (this.audioCtx.duration > 0) {
							const seekTime = (progress / 100) * this.audioCtx.duration;
								this.audioCtx.seek(seekTime);
							}
						}
				},
				onUnload() {
					if (this.audioCtx) {
						this.audioCtx.destroy();
					}
				}
	}
</script>

<style>
	.container {
	  width: 100%;
	  min-height: 100vh;
	  background-color: #f5f5f5;
	}
	.content {
	  padding: 16rpx;
	}
	.scroll-content {
	  height: calc(100vh - 32rpx);
	}
	.section {
	  margin-bottom: 30rpx;
	  padding: 20rpx;
	  background-color: #fff;
	  border-radius: 16rpx;
	  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	.section-title {
	  font-size: 32rpx;
	  font-weight: bold;
	  color: #333;
	  margin-bottom: 20rpx;
	  display: block;
	}
	.swiper {
	  height: 300rpx;
	}
	.swiper-image {
	  width: 100%;
	  height: 100%;
	}
	.rich-text {
	  font-size: 28rpx;
	  color: #666;
	  line-height: 40rpx;
	}
	.progress-container {
	  padding: 10rpx 5rpx;
	}
	.progress-text {
	  display: block;
	  font-size: 28rpx;
	  color: #333333;
	  margin-bottom: 15rpx;
	}
	.progress-bar {
	  width: 100%;
	  height: 12rpx;
	}
	.video-container {
	  background-color: #fff;
	  border-radius: 16rpx;
	  padding: 20rpx;
	  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	  margin-bottom: 30rpx;
	}
	.video-wrapper {
	  display: flex;
	  flex-direction: column;
	  gap: 15rpx;
	}
	.label {
	  font-size: 28rpx;
	  color: #333;
	  margin-right: 10rpx;
	}
	.radio-item {
	  margin-right: 20rpx;
	  display: flex;
	  align-items: center;
	}
	.btn-text {
			font-size: 15px;
			margin-bottom: -7px;
	}
	
	.btn-icon {
		width: 20px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.play-icon {
		width: 0;
		height: 0;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 15px solid #fff;
	}
		
	.pause-icon {
		width: 17px;
		height: 25px;
		display: flex;
		justify-content: space-between;
	}	
	.pause-line {
		width: 4px;
		height: 80%;
		background-color: #fff;
		border-radius: 2px;
	}
	.btn-pause {
		background-color: #007AFF;
		color: #fff;
	}
		
	.audio-desc {
		margin-bottom: 10px;
		font-size: 16px;
		color: #666;
	}
		
	.audio-slider {
		width: 100%;
		max-width: 260px;
	}
	.audio-wrapper {
	  padding: 15px;
	}
	.audio-group {
	  display: flex;
	  align-items: center;
	  gap: 10px; 
	}
	.audio-btn {
	  background-color: #1677ff; 
	  color: white;
	  border: none;
	  border-radius: 4px;
	  padding: 8px 12px;
	  cursor: pointer;
	  display: flex;
	  align-items: center;
	  gap: 6px; 
	}
	.audio-subtitle {
	  font-size: 16px;
	  font-weight: 600;
	  color: #333333;
	  margin-bottom: 8px;
	  line-height: 1.5;
	}
	.radio-group {
	  display: flex; /* 横向排列 */
	  gap: 20px; /* 按钮之间的间距，可根据需要调整 */
	  margin-top: 8px; /* 与上方“出行方式：”标签保持距离 */
	}


</style>
